import React from 'react';
import GroupList from './GroupList';
import { useTranslation } from 'react-i18next';

interface AgentInforMationProps {
	label?: string;
	agentName?: string | undefined;
	agentId?: number;
	groups?: any[];
	fullName?: string;
}

const AgentInforMation = (props: AgentInforMationProps) => {
	const { t } = useTranslation();
	const { label = t('agent-information'), agentName = '', agentId = '- -', groups = [], fullName = '' } = props;
	return (
		<div className="agent-information-box">
			<p className="agent-information-label">{label}</p>
			<div className="agent-information-info">
				<span className="agent-name">
					{t('agent')}：{agentName}
				</span>
				{/* <span className="agent-id">工号：{agentId}</span> */}
			</div>
			<div className="agent-information-fullName">
				<span className="agent-fullName">
					{t('name')}：{fullName}
				</span>
				{/* <span className="agent-id">工号：{agentId}</span> */}
			</div>
			<div className="agent-information-footer">
				<span className="group-text">{t('group')}：</span>
				<GroupList groups={groups} />
			</div>
		</div>
	);
};

export default AgentInforMation;
